<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>学工管理学生信息</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" th:href="@{/api/css/jquery.pagination.css}">
    <script th:src="@{/api/js/jquery.pagination.min.js}"></script>
    <style>
        .search{
            width:1300px;
            height:60px;
            margin-top: 30px;
            margin-bottom: 20px;

        }
        table{
            width: 90%; font-size: 16px;text-align: center;margin: 0 auto;
            border-collapse: separate;border-spacing: 0;border: 2px #e0e0e0;
            margin-top: 20px;
        }
        td {
            border-bottom: 2px solid #eaeaea;
        }
        .tr1{
            background: #efefef;font-size: 14px;height:50px;
        }
        .tr2{
            height: 60px;border-bottom: 2px solid #eaeaea;font-size: 13px;
        }
        .button{
            float: left;
            margin-left: 10px;
            height: 30px;
            width: 70px;
            border: none;
            background-color: rgb(22, 155, 213);
            color: white;

        }
        input{
            width:15%;
            height: 30px;
            float: left;
            border-radius: 3px;
            border-color: rgb(224, 224, 224);
            border-style: solid;
            border-width: 1px;
            text-indent: 5px;
            margin-left: 5px;

        }
        select{
            width: 15%;
            height: 30px;
            float: left;
            border-radius: 3px;
            border-color: rgb(224, 224, 224);
            border-style: solid;
            border-width: 1px;
            text-indent: 5px;
            margin-left: 5px;
        }
        .pagination pull-right no-margin{
            float: left;
            margin-top: 15px;
            margin-left: 10px;
        }
        a{
            margin-left: 15px;
            color: #1e9fff;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>

    <!-- left -->
    <div th:replace="~{commons/left::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div style="padding: 30px 30px ;">

            <h1 style="text-align: center">学生信息管理</h1>

            <div class="search" >
                <form name="form1" action="/staff_select_stu" method="get">
                    <select name="stuGrade">
                        <option >选择年级</option>
                        <option value ="2017">2017</option>
                        <option value ="2018">2018</option>
                        <option value="2019">2019</option>
                        <option value="2020">2020</option>
                    </select>

                    <select name="province" onChange="set_city(this, this.form.city);">
                        <option value="0">选择学院</option>
                        <option value="商学院">商学院</option>
                        <option value="现代管理学院">现代管理学院</option>
                        <option value="土木工程">土木工程</option>
                        <option value="人工智能学院">人工智能学院</option>
                        <option value="外国语与海外教育学院">外国语与海外教育学院</option>
                        <option value="设计学院">设计学院</option>
                        <option value="儿童与发展教育学院">儿童与发展教育学院</option>
                        <option value="现代音乐学院">现代音乐学院</option>
                        <option value="法学院">法学院</option>
                    </select>
                    <select   name="city" id="citys">
                        <option value="0">选择专业</option>
                    </select>
                    <select name="stuClass">
                        <option >选择班级</option>
                        <option value ="1班">1班</option>
                        <option value ="2班">2班</option>
                    </select>
                    <input type="text" name="stuName" placeholder="请输入姓名">
                    <input type="text" name="stuId" placeholder="请输入学号">
                    <input type="submit" class="button" value="查找">
                </form>
            </div>
            <div calss="padding">
                <table class="pure-table" >
                    <thead>
                    <tr class="tr1">
                        <th>年级</th>
                        <th>学院</th>
                        <th>专业</th>
                        <th>班级</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>

                    </thead>

                    <tbody>

                    <tr class="tr2" th:each="AllStudentList:${AllStudentList}" >
                        <td th:text="${AllStudentList.getStuGrade}" style="color: #00b4ef"></td>
                        <td th:text="${AllStudentList.getStuCollege}"> </td>
                        <td th:text="${AllStudentList.getStuMajor}"></td>
                        <td th:text="${AllStudentList.getStuClass}"> </td>
                        <td th:text="${AllStudentList.getStuId}"> </td>
                        <td th:text="${AllStudentList.getStuName}"> </td>
                        <td th:text="${AllStudentList.getStuSex}"> </td>
                        <td>
                            <a th:href="@{'/staff_stu_detail/'+${AllStudentList.getStuId()}}" style="color: #00b4ef;">详情</a>
                            <a th:href="@{'/to_staff_stu_update/'+${AllStudentList.getStuId()}}" style="color:red;">修改</a>
                        </td>
                    </tr>
                    </tbody>

                </table>



            </div>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function() {
        var element = layui.element;
    });

    cities = new Object();
    cities['商学院']=new Array('会计学','工商管理','电子商务','国际经济与贸易','‘金融学','市场营销');
    cities['现代管理学院']=new Array('行政管理','广播电视编导','酒店管理','物业管理','文化产业管理');
    cities['土木工程']=new Array('土木工程','工程管理','建筑电气与智能化','道路桥梁与渡河工程');
    cities['人工智能学院']=new Array('金融科技', '机器人工程', '人工智能', '物联网工程', '数据科学与大数据技术',
        '电子信息工程', '计算机科学与技术', '通信工程', '软件工程', '网络工程');
    cities['外国语与海外教育学院']=new Array('商务英语', '日语');
    cities['设计学院']=new Array('数字媒体技术', '广告学', '美术学');
    cities['儿童与发展教育学院']=new Array('学前教育', '应用心理学');
    cities['现代音乐学院']=new Array('音乐学', '舞蹈学');
    cities['法学院']=new Array('法学');



    function set_city(province, city)
    {
        var pv, cv;
        var i, ii;

        pv=province.value;
        cv=city.value;

        city.length=1;

        if(pv=='0') return;
        if(typeof(cities[pv])=='undefined') return;

        for(i=0; i<cities[pv].length; i++)
        {
            ii = i+1;
            city.options[ii] = new Option();
            city.options[ii].text = cities[pv][i];
            city.options[ii].value = cities[pv][i];
        }

    }
</script>
</body>
</html>
